import React, {Component} from 'react';
// import Child from "./Child";
import {
  BrowserRouter as Router,//BrowserRouter 别名叫 Router 在最外层包裹一下
  // 整个项目只需要用一次 只能包含一个子节点
  Switch,//匹配对应的Route 写法包裹在Route的外面
  Route,//有一个path的属性 用来匹配浏览器中的路径 根据路径加载对应的组件
  Link, // 类似于 vue中的 router-link 可以实现路径的变化
  Redirect,//从当前路由重定向到目标路由
  NavLink
} from 'react-router-dom';
import style from './index.module.css';
import RouterView from "./router/router-config";


class Index extends Component {
  // state = {
  //
  // };
  person = {
    name: '小王',
    age: 20
  };

  constructor(props) {
    super(props);
    // 成员属性
    this.state = {
      name: '成员属性'
    };
    window.h = this;
  }

  sayName() {
    console.log(this.state.name);
  }

  defaultActive = {
    color: '#c9ebfd',
    border: '2px solid #c9ebfd'
  };

  render() { //成员方法
    return (
      <Router>
        {/*<Child title={'小王给小红的情书'}/>*/}
        <div>
          <ul className={style.tab}>
            {/*<li>*/}
            {/*  <NavLink to='/'>Home</NavLink>*/}
            {/*</li>*/}
            <li>
              <NavLink activeStyle={this.defaultActive} to='/youji'>游记</NavLink>
            </li>
            <li>
              <NavLink activeStyle={this.defaultActive} to='/gonglue'>攻略</NavLink>
            </li>
          </ul>
          {/* 和 vue什么区别 */}
          <RouterView/>
        </div>
      </Router>
    );
  }

  // 静态属性 不再属于类得对象  属于类本身
  static defaultValue = {
    name: 'day07',
    dayAge() {

    }
  };
}

Index.defaultProps = {
  //静态方法
  sayName() {
    console.log(Index.defaultValue.name)
  }
};

export default Index;
